<!--
 * @Author: Mark
 * @Date: 2019-01-30 10:23:43
 * @LastEditors: Mark
 * @LastEditTime: 2019-01-30 10:51:30
 * @Description: 
 -->
<template>
  <div class="simditor">
    <textarea :id="id" ></textarea>
  </div>
</template>

<script>
import Simditor from 'simditor'
import $ from 'jquery'
import 'simditor/styles/simditor.css'
export default {
  name : 'simditor',
  data () {
    return {
      editor : ''
    }
  },
  props:{
    id : '',
    option :{
      type : Object,
      default(){
        return {}
      }
    }
  },

  components: {},

  computed: {},

  mounted() {
    let vue = this;
    vue.editor = new Simditor(Object.assign({},{
       textarea: $(`#${vm.id}`)
    }, this.options));
    this.editor.on('valuechanged',(e,src)=>{
      this.valueChange(e, src)
    })
  },

  methods: {
     valueChange(e,val){
      this.$emit('change', this.editor.getValue())
     }
  }
}

</script>
<style lang='scss' scoped>
</style>